<template>
    <div class="gridTemplate-body">
        <table class="table table-hover table-condensed table-bordered">
            <thead>
            <tr>
                <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}"
                    :style="{minWidth: columnsDesc[$index].width , display: columnsDesc[$index].display}">
                    {{ columnsDesc[$index].name }}
                    <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
                <td v-for="key in columns"
                    :style="{minWidth: columnsDesc[$index].width , display: columnsDesc[$index].display}">
                    <span v-if="$index < columns.length-1">{{entry[key]}}</span>
                    <span v-else>
                          <a v-link="{ path: entry.action.edit }">编辑</a>
                        | <a @click="toDelete(entry.id, entry.action.del)">删除</a>
                        | <a v-link="{ path: entry.action.detail }">查看详细</a>
                        | <a v-link="{ path: entry.action.createCode }">生产产品二维码</a>
                    </span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    module.exports = {
        props: {
            data: Array,
            columns: Array,
            columnsDesc: Array,
            filterKey: String
        },
        data: function () {
            var sortOrders = {};
            this.columns.forEach(function (key) {
                // 初始化表头每个属性字段，赋值为 1
                sortOrders[key] = 1
            });
            return {
                sortKey: '',
                sortOrders: sortOrders
            }
        },
        methods: {
            sortBy: function (key) {
                this.sortKey = key;
                // 表头每个属性字段，赋值为 -1，排序
                this.sortOrders[key] = this.sortOrders[key] * -1;
            },
            toDelete: function (id, url) {
                var _this = this;
                if (window.confirm("确定删除？？？")) {
                    $.post(url, {"id": id}).then(function (data) {
                        (function () {
                            // 刷新页面
                           window.location.reload();
                        }(alert("删除成功")));
                    });
                }
            }
        }
    }
</script>

<style>

    .gridTemplate-body {
        width: 100%;
        overflow-x: auto;
    }

    .gridTemplate-body a {
        cursor: pointer;
    }

    .gridTemplate-body th {
        background-color: #c1e2b3;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -user-select: none;
    }

    .gridTemplate-body th,
    .gridTemplate-body td {
        max-width: 400px;
        text-align: center;
        padding: 10px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gridTemplate-body th.active .arrow {
        opacity: 1;
    }

    .gridTemplate-body .arrow {
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 0;
        margin-left: 5px;
        opacity: 0.66;
    }

    .gridTemplate-body .arrow.asc {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #000;
    }

    .gridTemplate-body .arrow.dsc {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #000;
    }

</style>